// 登录成功的显示状态
! function loginsuccess() {
    const login = $('.login'); //没有登录的
    const admin = $('.admin'); //登录成功的
    //如果存在用户名，显示登录成功。
    if (localStorage.getItem('username')) {
        login.hide();
        admin.show();
        $('.admin span').html(localStorage.getItem('username'))
    }

    $('.admin a').on('click', function() {
        localStorage.removeItem('username');
        login.show();
        admin.hide();
    });
}();



//tab选项卡模块
! function tabSwitch() {
    const btns = $('.tab_title li');
    const items = $('.tab_content .item'); //获取元素
    btns.on('mouseover', function() {
        //$(this).index() - 当前操作的元素的索引
        $(this).addClass('active').siblings('li').removeClass('active');
        items.eq($(this).index()).addClass('show').siblings('.item').removeClass('show');
    });
}();

//轮播图
! function lunboPic() {
    const banner = $('.banner');
    const picli = $('.banner ul li');
    const btnli = $('.banner ol li');
    const left = $('#left');
    const right = $('#right');
    let num = null; //存储索引
    let timer = null;

    function tabswitch() {
        btnli.eq(num).addClass('active').siblings('li').removeClass('active');
        picli.eq(num).animate({ opacity: 1 }).siblings('li').animate({ opacity: 0 })
    }
    btnli.on('mouseover', function() {
        num = $(this).index(); //存储当前的索引
        tabswitch();
    });

    right.on('click', function() {
        num++;
        if (num > btnli.length - 1) {
            num = 0;
        }
        tabswitch();
    });

    left.on('click', function() {
        num--;
        if (num < 0) {
            num = btnli.length - 1;
        }
        tabswitch();
    });

    timer = setInterval(function() {
        right.click();
    }, 3000);

    banner.hover(function() {
        clearInterval(timer);
    }, function() {
        timer = setInterval(function() {
            right.click();
        }, 3000);
    });

}();

//幻灯片效果
! function taobaoPic() {
    const taobao = $('.taobao');
    const picul = $('.taobao ul'); //运动的盒子
    const picli = $('.taobao ul li');
    const btnli = $('.taobao ol li');
    const leftarrow = $('#leftarrow');
    const rightarrow = $('#rightarrow');
    let num = null; //存储索引
    let timer = null;

    let liwidth = picli.eq(0).width(); //一个li的width790
    //1.改变布局 - 无缝运动都要改变布局。
    //计算ul列表的宽度
    picul.css({
        width: picli.length * liwidth
    });


    //2.点击小圆圈，图片位置移动(和索引有关，索引*790)
    btnli.on('click', function() {
        num = $(this).index(); //当前小圆圈对应的索引
        change();
    });

    //3.显示左右箭头
    taobao.hover(function() {
        leftarrow.show();
        rightarrow.show();
    }, function() {
        leftarrow.hide();
        rightarrow.hide();
    });

    //4.左右箭头事件
    rightarrow.on('click', function() {
        num++;
        change();
    });

    leftarrow.on('click', function() {
        num--;
        change();
    });

    //封装图片运动的过程
    function change() {
        //判断如果是最后一张，改变picul位置。
        if (num > btnli.length) { //当前的索引>5,先重置picul的位置，然后位置改变
            picul.css('left', 0);
            num = 1;
        }
        if (num === -1) {
            picul.css('left', -liwidth * btnli.length);
            num = btnli.length - 1;
        }
        //改变小圆圈的状态
        if (num === btnli.length) { //右箭头
            btnli.eq(0).addClass('active').siblings('li').removeClass('active');
        } else {
            btnli.eq(num).addClass('active').siblings('li').removeClass('active');
        }
        picul.stop(true).animate({ //stop:保证运动完成
            left: -num * liwidth
        }, 200);
    }




}();

//二级菜单
! function twomenu() {
    const menuli = $('.menu li'); //18个
    const items = $('.item'); //18个
    const cartlist = $('.cartlist');
    //鼠标移入对应的li显示cartlist盒子
    menuli.hover(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
        items.eq($(this).index()).show().siblings('.item').hide(); //当前和索引对应的内容显示其他的隐藏。
        cartlist.show();

        //拖到滚动条完整的显示cartlist里面的内容。
        let scrolltop = $(window).scrollTop();
        let bannertop = $('.banner1').offset().top; //获取banner1离顶部的距离。
        if (scrolltop > bannertop) {
            cartlist.css({
                top: scrolltop - bannertop
            })
        } else {
            cartlist.css({
                top: 0
            })
        }


    }, function() {
        cartlist.hide();
    });

    //cartlist移入显示，移出隐藏,cartlist和li有重叠的部分。
    cartlist.hover(function() {
        $(this).show();
    }, function() {
        $(this).hide();
    })
}();